<template>
	<view class="wrap">
		<form  @submit="submit" >
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" 
						placeholder-class="line" 
						placeholder="请填写会员昵称" 
						name="nickname"
						v-model="nickname"
					 />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload ref="uUpload"
						name="avatarurl"
						:fileList="oldAvatarUrl"
						max-count="1"
						:action="action"
						upload-text="上传头像"
						:auto-upload="false" 
						@on-success="uploadsuccess"
						@on-error="uploaderror"
						@on-choose-complete="chooseimg"
						:form-data="formData"
						:header="header"
					></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio 
								v-for="(item, index) in sexlist" :key="index" 
								:name="item.value"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" 
						placeholder-class="line" 
						placeholder="2021-01-24" 
						name="birthday" 
						v-model="birthday"
					/>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input
						disabled
						type="text"
					  	placeholder-class="line" 
					  	placeholder="省市区县、乡镇等" 
					  	name="region" 
					  	v-model="region"
					  />
				</view>
			</view>
			<regionPicker
				:visible.sync="regionVisible"
				mode="region"
				default-type="value"
				:hide-area="false"
				@confirm="onConfirm($event,'region')"
				ref="region" 
			></regionPicker>
			<u-picker 
				mode="time" 
				ref="uPicker" 
				v-model="birthdayShow" 
				@confirm="birthdayConfirm"
			/>
			<button form-type="submit" type="warn" @click="request_infoedit">保存并使用</button>
			<button form-type="reset" >重置</button>
		</form>
	</view>	
</template>

<script>
	
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components:{regionPicker},
		data() {
			return {
				id:'',//初始化修改数据id
				// 头像提交服务端地址
				action: this.$URL+`/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				// oldAvatarUrl:[{url:"https://api.aslegou.top/uploads/tou.jpg"}],
				oldAvatarUrl:[],
				// 表单数据(不含头像信息)
				formData:{},
				// 初始化header头
				header:{},
				oldImg:'',//初始化旧图片
				regionVisible:false,//初始化地区选择器开关
				nickname:'鲁班',//初始化收件人姓名
				region:'北京市市辖区朝阳区',//初始化地区默认值
				birthday:'1992-02-14',
				birthdayShow:false,
				sexlist:[
						{value:1,name:'男'},
						{value:2,name:'女'},
					],
				sex:1, //初始化会员性别
				userinfo: {}
			}
		},
		
		onLoad(){
			const userinfo = uni.getStorageSync('userinfo');
			this.userinfo = userinfo;
			
			this.request_getuserinfo();
		},
			
		methods: {
			// 获取个人信息
			async request_getuserinfo(){
				let [err, {data}] = await uni.request({
					url: `${this.$baseApi}getuserinfo`,
					header: {
						authorization: this.userinfo.token
					},
					data: {
						uid: this.userinfo.uid
					}
				})
				data = data.list[0];
				console.log(data);
				data.avatarurl = this.$baseUrl + data.avatarurl;
				this.action = data.avatarurl;
				this.nickname = data.nickname;
				this.sex = data.sex;
				this.oldAvatarUrl = [{url: data.avatarurl}];
				this.region = data.region ? data.region : '';
				this.birthday = data.birthday ? data.birthday : '';
				this.id = data.id;
			},
			
			// 编辑个人信息
			async request_infoedit(){
				console.log(this.userinfo);
				let [err, {data}] = await uni.request({
					method: 'POST',
					url: `${this.$baseApi}infoedit`,
					header: {
						authorization: this.userinfo.token
					},
					data: {
						id: this.id,
						nickname: this.nickname,
						sex: this.sex,
						avatarurl: this.avatarurl,
						region: this.region,
						birthday: this.birthday
					}
				})
				console.log(data);
			},
			
			// 选择会员地区
			onConfirm(res){
				console.log(res);
				this.region = res.result;
			},
			// 监听本地选择图片
			chooseimg(lists, name){
			},
			// 性别标签切换
			radioGroupChange(e){
			},
		
			// 地址默认设置开关
			setDefault(e){
			},
		
			// 开始生日选择器
			showBirthdayPicker(){
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e){
				console.log(e);
				this.birthday = `${e.year}-${e.month}-${e.day}`
			},
			
			// 图片上传成功触发
			uploadsuccess(data, index, lists, name){
			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name){
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>
